<script lang='ts'  setup>
import { reactive, ref } from 'vue'
import logo from '@/assets/logo.png'
import mainStore from '@/store'
import { storeToRefs } from 'pinia';
import { watch } from 'vue';
import { onBeforeMount } from 'vue';
import TreeMenu from './TreeMenu.vue';
import api from '@/api';
import storage from '@/utils/storage';
const { asideIsCollapse } = storeToRefs(mainStore)

const asideWidth = ref(200)
const menuList = ref([])
const logoClass = reactive([
    {
        'logo-wrap': asideIsCollapse,
        'justify-center': asideIsCollapse,
    },
])

onBeforeMount(async () => {
    const { data: res } = await api.getMenuListApi({ menuState: 1 })
    menuList.value = res
})
watch(asideIsCollapse, (val) => {
    if (val) {
        asideWidth.value = window.innerWidth <= 675 ? 0 : 64
    } else {
        asideWidth.value = 200
    }
})

const handleMenuSelect = (index: string) => {
    storage.setState('currentMenu', index)
    defaultMenu.value = index
}
const defaultMenu = ref(storage.getState('currentMenu') || '/home')

</script>

<template>
    <div id="Aside" class="flex flex-col " :style="{ width: asideWidth + 'px' }">
        <div class=" flex items-center h-[50px] bg-[#15133C]  pt-[10px] px-[30px]  " :class="logoClass">
            <img :src="logo" alt="logo" class=" h-full">
            <span class=" text-white pl-[10px] text-[22px] select-none" v-if="!asideIsCollapse">Manager</span>
        </div>

        <el-menu :default-active="defaultMenu" :style="{ width: asideWidth }" class="border-0 flex-1 select-none "
            :collapse="asideIsCollapse" :collapse-transition="false" background-color="#15133C" text-color="#fff"
            v-if="asideWidth !== 0" router unique-opened @select="handleMenuSelect">
            <el-menu-item index="/home">
                <template #title>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>首页</span>
                </template>
            </el-menu-item>
            <TreeMenu :user-menu="menuList" />
        </el-menu>
    </div>

</template>
<style>
</style>